import { Layer, Shape, Stage } from 'react-konva'

export default function View() {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Shape
          width={500}
          height={500}
          x={100}
          y={100}
          sceneFunc={function (context, shape) {
            // const width = shape.width()
            // const height = shape.height()
            // context.beginPath()
            // context.moveTo(0, 0)
            // context.lineTo(width, 0)
            // context.lineTo(width, height)
            // context.lineTo(0, height)
            // // context.moveTo(0, 0)
            // context.closePath()
            // // (!) Konva specific method, it is very important
            // context.fillStrokeShape(shape)

            context.beginPath()
            context.rect(0, 0, shape.width(), shape.height())
            context.rect(100, 100, shape.width(), shape.height())
            context.clip()
            context.closePath()
            // important Konva method that fill and stroke shape from its properties
            // like stroke and fill
            context.fillStrokeShape(shape)
            // context.fillShape(shape)
          }}
          // fill='#00D2FF'
          stroke='black'
          dash={[5, 5]}
          strokeWidth={1}
        />
      </Layer>
    </Stage>
  )
}
